<template>
  <Header></Header>
  <div class="content">
    <div class="title">
      <h1>{{ STEP_INDEX[currentStep] }}</h1>
    </div>
    <el-steps
      direction="vertical"
      class="steps"
      style="max-width: 600px; margin: 30px auto"
      :active="currentStep"
      finish-status="success"
      align-center
    >
      <el-step v-for="(item, index) in STEP_INDEX" :key="index" :title="item" />
    </el-steps>
    <!-- 活动基本信息表单 -->
    <div v-if="currentStep == 0" class="form">
      <el-form
        label-position="top"
        :model="upContestForm"
        :rules="upContestFormRules"
        ref="contestFormRef"
      >
        <el-form-item label="活动名称" prop="title">
          <el-input v-model="upContestForm.title"></el-input>
        </el-form-item>
        <el-form-item label="活动简介" prop="description">
          <el-input
            v-model="upContestForm.description"
            type="textarea"
          ></el-input>
        </el-form-item>
        <el-form-item label="活动类型" prop="categoryId">
          <el-cascader
            placeholder="请选择活动类型"
            v-model="upContestForm.categoryId"
            :options="categoryList as unknown as CascaderOption[]"
            :props="optionProps"
            filterable
          />
        </el-form-item>
        <el-form-item label="活动地点" prop="local">
          <el-input v-model="upContestForm.local"></el-input>
        </el-form-item>
        <el-form-item label="主办方" prop="organizer">
          <el-select
            v-model="upContestForm.organizer"
            filterable
            placeholder="主办方"
            style="width: 240px"
          >
            <el-option
              v-for="item in organizersData"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="活动封面" prop="cover">
          <el-upload
            v-model:file-list="fileList"
            ref="upload"
            :auto-upload="false"
            :headers="upHeaders"
            :limit="1"
            :on-exceed="handleExceed"
            :on-success="handleSuccess"
            :on-change="handleChange"
            :multiple="false"
            list-type="picture-card"
          >
            <el-icon>
              <Plus />
            </el-icon>
            <template #file="{ file }">
              <el-dialog
                v-model="isFile"
                title="封面"
                :before-close="handleBeforeClose"
                width="1300"
                destroy-on-close
                center
              >
                <img :src="file.url" id="cropper" alt="" />
                <template #footer>
                  <div class="dialog-footer">
                    <el-button @click="cropImage" type="primary">
                      裁剪并上传
                    </el-button>
                  </div>
                </template>
              </el-dialog>
              <div v-if="newImage">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="newImage"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview()"
                  >
                    <el-icon><zoom-in /></el-icon>
                  </span>
                </span>
              </div>
              <el-dialog v-model="dialogVisible">
                <img w-full :src="dialogImageUrl" alt="Preview Image" />
                <template #footer>
                  <div class="dialog-footer">
                    <el-button @click="dialogVisible = false" type="primary">
                      关闭
                    </el-button>
                  </div>
                </template>
              </el-dialog>
            </template>
          </el-upload>
          <span style="padding-left: 20px; color: #666"
            >注：重新上传默认替换掉原来的封面</span
          >
        </el-form-item>

        <el-form-item label="报名开始时间" prop="enrollStartDate">
          <el-date-picker
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            v-model="upContestForm.enrollStartDate"
            type="date"
            placeholder="报名开始时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="报名结束时间" prop="enrollEndDate">
          <el-date-picker
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            v-model="upContestForm.enrollEndDate"
            type="date"
            placeholder="报名开始时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="活动开始时间" prop="startDate">
          <el-date-picker
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            v-model="upContestForm.startDate"
            type="date"
            placeholder="报名开始时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="活动结束时间" prop="endDate">
          <el-date-picker
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            v-model="upContestForm.endDate"
            type="date"
            placeholder="报名开始时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="是否允许提交电子档案">
          <el-radio-group v-model="upContestForm.isEmail">
            <el-radio :value="0">是</el-radio>
            <el-radio :value="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否允许评论">
          <el-radio-group v-model="upContestForm.isComment">
            <el-radio :value="0">是</el-radio>
            <el-radio :value="1">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="是否允许组队">
          <el-radio-group v-model="upContestForm.isTeam">
            <el-radio :value="0">是</el-radio>
            <el-radio :value="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否收费">
          <el-radio-group v-model="upContestForm.isToll">
            <el-radio :value="0">是</el-radio>
            <el-radio :value="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="最大报名人数"
          prop="personNum"
        >
          <el-input v-model="upContestForm.personNum"></el-input>
        </el-form-item>

        <!-- 这里 只有当 isToll 为 true 时才显示 -->
        <el-form-item
          v-if="upContestForm.isToll == 0"
          label="费用金额"
          prop="toll"
        >
          <el-input v-model="upContestForm.toll"></el-input>
        </el-form-item>
        <el-form-item
          v-if="upContestForm.isTeam == 0"
          label="队伍人数[x,y]"
          prop="teamNum"
        >
          <el-input v-model="upContestForm.teamNum"></el-input>
        </el-form-item>
        <el-form-item label="活动说明" prop="content">
          <AiEditor :disabled="false" v-model="upContestForm.content" />
        </el-form-item>
        <el-form-item>
          <el-button @click="currentStepNext()" type="primary"
            >下一步</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 设置活动报名模板 -->
    <div v-if="currentStep === 1" class="form">
      <el-form label-position="top">
        <div class="template-form-item">
          <component
            v-for="(item, index) in upContestForm.templateValueList"
            :key="index"
            :label="item.name"
            is="el-form-item"
          >
            <div class="hove">
              <div @click="handleUpdateFormItemConfirm(item)" class="edit">
                <el-button
                  :disabled="item.is_delete"
                  type="primary"
                  :icon="Edit"
                />
              </div>
              <div @click="handleTemplateFormItem(item)" class="delete">
                <el-button
                  :disabled="item.is_delete"
                  type="primary"
                  :icon="Delete"
                />
              </div>
            </div>
            <!-- 下拉框 -->
            <component v-if="item.type === 1" is="el-select" :type="item.type">
              <component
                v-for="(value, index) in item.value"
                :key="index"
                :label="value"
                :value="value"
                is="el-option"
                :type="item.type"
              >
              </component>
            </component>
            <!-- 普通文本框 -->
            <component v-else is="el-input" :type="item.type"> </component>
          </component>
        </div>
        <Add-or-update
          v-if="addOrUpdateFormVisible"
          @syncAdd="syncAdd"
          ref="addOrUpdateFormRef"
        />
      </el-form>
      <el-button type="primary" @click="addFormItem">添加表单项</el-button>
      <el-button @click="currentStep--" type="primary">上一步</el-button>
      <el-button type="primary" @click="currentStep++">下一步</el-button>
    </div>
    <!-- 验证身份信息 -->
    <div v-if="currentStep === 2" class="form">
      <el-form
        label-position="top"
        :model="upContestForm"
        :rules="upContestFormRules"
      >
        <el-form-item label="密码" prop="password" ref="contestFormRef">
          <el-input type="password" v-model="upContestForm.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="useDebounce()" type="primary">发布活动</el-button>
          <el-button type="primary" @click="currentStep--">上一步</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 发布活动 -->
    <div v-if="currentStep === 3" class="release-success">
      <div class="icon-success">
        <svg
          t="1715586489705"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4303"
          width="100"
          height="100"
        >
          <path
            d="M512 64.3C264.7 64.3 64.3 264.7 64.3 512c0 247.3 200.5 447.7 447.7 447.7 247.3 0 447.7-200.5 447.7-447.7 0-247.3-200.4-447.7-447.7-447.7z m257.9 393.3c-80.9 9.1-260.1 164.9-321.5 250.9-66.7-93.9-150.1-153.5-209.8-180l126.3-67.7 86.8 118.7s160-217.7 348.9-287.5c-10.4 61.5-41.7 72.5-30.7 165.6z"
            fill="#2FC25B"
            p-id="4304"
          ></path>
        </svg>
        <div class="text">
          <span>发布成功</span>
          <p>恭喜您，活动发布成功！社区将在24小时内审核并发布活动。</p>
        </div>
      </div>
      <div class="btn">
        <el-button @click="userRouter.push('/')" type="primary"
          >回到首页</el-button
        >
        <el-button @click="pushNewContest" type="primary"
          >发布新的活动</el-button
        >
      </div>
    </div>
  </div>
  <FixedMenu />
  <Footer></Footer>
</template>
<script lang="ts" setup>
import { nextTick, ref, watch, reactive } from "vue";
import {
  ElInput,
  genFileId,
  ElMessage,
  ElLoading,
  ElMessageBox,
} from "element-plus";
import type {
  UploadFile,
  FormRules,
  UploadInstance,
  UploadProps,
  UploadRawFile,
  FormInstance,
  CascaderOption,
} from "element-plus";
import { Plus, ZoomIn, Delete, Edit } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { PushActivityParams, TemplateValue } from "@/types/publishEvents";
import { pushActivity } from "@/api/events";
import { debounce } from "@/utils/debounce";
import { isQuit } from "@/utils/tools";
import AddOrUpdate from "./addApplyOrUpdate.vue";
import axios from "axios";
import { usePublish } from "@/hooks/publish";
const userRouter = useRouter();
const STEP_INDEX = ref([
  "活动基本信息",
  "设置活动报名模板",
  "验证身份信息",
  "发布活动",
]);

const addOrUpdateFormVisible = ref(false);
const syncAdd = (list: TemplateValue[]) => {
  upContestForm.value.templateValueList = list;
};
const addOrUpdateFormRef = ref();
const addFormItem = async () => {
    addOrUpdateFormVisible.value = true;
    await nextTick();
    addOrUpdateFormRef.value.init()
};
// 修改 表单
const handleUpdateFormItemConfirm = async (item: TemplateValue) => {
  addFormItemVisible.value = true;
  await nextTick();
  addOrUpdateFormRef.value.init(item)
};

const pushNewContest = () => {
  window.removeEventListener("beforeunload", isQuit);
  userRouter.go(0);
};
// 记录 当前发布活动的步骤
const currentStep = ref(0);

// #region 添加活动封面
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const handlePictureCardPreview = () => {
  dialogImageUrl.value = newImage.value!;
  dialogVisible.value = true;
};
const upload = ref<UploadInstance>();
const handleExceed: UploadProps["onExceed"] = (files) => {
  upload.value!.clearFiles();
  const file = files[0] as UploadRawFile;
  file.uid = genFileId();
  upload.value!.handleStart(file);
};
const handleSuccess: UploadProps["onSuccess"] = ({}, response: any) => {
  console.log(response);
  upContestForm.value.cover = response.response.url as string;
};
// @ts-ignore
const Cropper: any = window.Cropper;
let cropper: any;
let newImage = ref("");
let isFile = ref(false);
let fileList = ref<UploadFile[]>([]);
// 初始化裁剪图片弹窗
const handleChange = async (rawFile: UploadFile) => {
  console.log("初始化", rawFile);
  if (
    rawFile!.raw!.type !== "image/jpeg" &&
    rawFile!.raw!.type !== "image/png"
  ) {
    ElMessage.error("请选择图片");
    return false;
  }
  isFile.value = true;
  await nextTick();
  let img = document.getElementById("cropper");
  // @ts-ignore
  cropper = new Cropper(img, {
    aspectRatio: 2 / 1,
    autoCrop: true,
    cropBoxResizable: false,
    dragMode: "move",
    autoCropArea: 0.8,
  });
};
// 上传裁剪图片
const cropImage = () => {
  // @ts-ignore
  // 本地回显图片
  let base64Image = cropper.getCroppedCanvas().toDataURL("image/jpeg");
  newImage.value = base64Image;

  // 上传图片
  cropper!.getCroppedCanvas().toBlob((res: Blob) => {
    let file = new File([res], res.type, { type: res.type });
    let fromData = new FormData();
    fromData.append("file", file);
    axios
      .post("http://117.72.35.196:8848/common/upload", fromData, {
        headers: {
          "Content-Type": "multipart/form-data",
          token: upHeaders.value.token,
        },
      })
      .then((res) => {
        upContestForm.value.cover = res.data.url as string;
      })
      .catch(() => {
        ElMessage.error("上传图片失败，请重新上传");
      });
  });
  isFile.value = false;
};

// 裁剪弹窗关闭的回调
const handleBeforeClose = (done: any) => {
  ElMessageBox.confirm("当前裁剪图片未上传确定要关闭吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    showClose: false,
  }).then(() => {
    done();
    // 清空 图片 list
    fileList.value = [];
  });
};
// #endregion

// #region 活动表单基本信息
let contestFormRef = ref<FormInstance>();
const upContestForm = ref<PushActivityParams>({
  categoryId: "", // 活动类别
  content: "", // 内容
  cover: "", // 封面图片
  description: "", // 简介
  startDate: "", // 开始时间
  endDate: "", // 结束时间
  enrollEndDate: "", // 报名结束时间
  enrollStartDate: "", // 报名开始时间
  imgNameList: [], // 图片名称列表
  imgUrlList: [], // 图片地址列表
  isComment: 0, // 是否允许评论
  isEmail: 0, // 是否允许提交电子档案
  isTeam: 1, // 是否允许组队
  isToll: 0, // 是否收费
  local: "", // 地点
  organizer: "", // 主办方
  password: "", // 密码
  personNum: 0, // 人数
  pushId: "", // 推送ID
  teamNum: 0, // 队伍人数
  title: "", // 标题
  toll: 0, // 费用金额
  templateValueList: [],
});

// 活动表单 formData 验证规则
const upContestFormRules = reactive<FormRules<typeof upContestForm>>({
  categoryId: [
    {
      required: true,
      message: "活动类别不能为空",
      trigger: ["blur", "change"],
    },
  ], // 活动类别
  content: [
    {
      required: true,
      message: "活动内容不能为空",
      trigger: ["blur", "change"],
    },
  ], // 内容
  cover: [
    { required: true, message: "请上传活动封面", trigger: ["blur", "change"] },
  ], // 封面图片
  description: [
    { required: true, message: "请填写活动简介", trigger: ["blur", "change"] },
  ], // 简介
  startDate: [
    { validator: checkEnrollEndDate, trigger: ["blur", "change"] },
    { required: true, message: "请填写开始时间", trigger: ["blur", "change"] },
  ], // 开始时间
  endDate: [
    { validator: checkEnrollEndDate, trigger: ["blur", "change"] },

    { required: true, message: "请填写结束时间", trigger: ["blur", "change"] },
  ], // 结束时间
  enrollEndDate: [
    { validator: checkEnrollEndDate, trigger: ["blur", "change"] },

    {
      required: true,
      message: "请填写报名结束时间",
      trigger: ["blur", "change"],
    },
  ], // 报名结束时间
  enrollStartDate: [
    { validator: checkEnrollEndDate, trigger: ["blur", "change"] },

    {
      required: true,
      message: "请填写报名开始时间",
      trigger: ["blur", "change"],
    },
  ], // 报名开始时间
  local: [
    { required: true, message: "请添加地点", trigger: ["blur", "change"] },
  ], // 地点
  organizer: [
    { required: true, message: "请添加主办方", trigger: ["blur", "change"] },
  ], // 主办方
  password: [
    { required: true, message: "请填写密码", trigger: ["blur", "change"] },
  ], // 密码
  personNum: [
    { required: true, message: "请填写人数", trigger: ["blur", "change"] },
  ], // 人数
  teamNum: [
    { required: true, message: "请填写队伍人数", trigger: ["blur", "change"] },
  ], // 队伍人数
  title: [
    { required: true, message: "请填写标题", trigger: ["blur", "change"] },
  ], // 标题
  toll: [
    { required: true, message: "请填写金额", trigger: ["blur", "change"] },
  ], // 费用金额
});

function checkFormDate(callback: Function) {
  if (new Date(upContestForm.value.enrollEndDate) < new Date()) {
    callback(new Error("报名结束时间不能小于当前时间"));
  } else if (
    new Date(upContestForm.value.enrollEndDate) <
    new Date(upContestForm.value.enrollStartDate)
  ) {
    callback(new Error("报名结束时间不能小于报名开始时间"));
  } else if (
    new Date(upContestForm.value.enrollEndDate) >
    new Date(upContestForm.value.startDate)
  ) {
    callback(new Error("报名结束时间不能大于比赛开始时间"));
  } else if (
    new Date(upContestForm.value.enrollEndDate) >
    new Date(upContestForm.value.endDate)
  ) {
    callback(new Error("报名结束时间不能大于比赛结束时间"));
  }
  if (new Date(upContestForm.value.enrollStartDate) < new Date()) {
    callback(new Error("报名开始时间不能小于当前时间"));
  } else if (
    new Date(upContestForm.value.enrollStartDate) >
    new Date(upContestForm.value.enrollStartDate)
  ) {
    callback(new Error("报名开始时间不能大于报名截止时间"));
  } else if (
    new Date(upContestForm.value.enrollStartDate) >
    new Date(upContestForm.value.startDate)
  ) {
    callback(new Error("报名开始时间不能大于比赛开始时间"));
  } else if (
    new Date(upContestForm.value.enrollStartDate) >
    new Date(upContestForm.value.endDate)
  ) {
    callback(new Error("报名开始时间不能大于比赛结束时间"));
  }
  if (new Date(upContestForm.value.startDate) < new Date()) {
    callback(new Error("比赛开始时间不能小于当前时间"));
  } else if (
    new Date(upContestForm.value.startDate) <
    new Date(upContestForm.value.enrollStartDate)
  ) {
    callback(new Error("比赛开始时间不能小于报名开始时间"));
  } else if (
    new Date(upContestForm.value.startDate) <
    new Date(upContestForm.value.enrollEndDate)
  ) {
    callback(new Error("比赛开始时间不能小于报名截止时间"));
  } else if (
    new Date(upContestForm.value.startDate) >
    new Date(upContestForm.value.endDate)
  ) {
    callback(new Error("比赛开始时间不能大于比赛结束时间"));
  }
  if (new Date(upContestForm.value.endDate) < new Date()) {
    callback(new Error("比赛结束时间不能小于当前时间"));
  } else if (
    new Date(upContestForm.value.endDate) <
    new Date(upContestForm.value.enrollStartDate)
  ) {
    callback(new Error("比赛结束时间不能小于报名开始时间"));
  } else if (
    new Date(upContestForm.value.endDate) <
    new Date(upContestForm.value.enrollEndDate)
  ) {
    callback(new Error("比赛结束时间不能小于报名截止时间"));
  } else if (
    new Date(upContestForm.value.endDate) <
    new Date(upContestForm.value.endDate)
  ) {
    callback(new Error("比赛结束时间不能大于比赛开始时间"));
  }
  return true;
}

function checkEnrollEndDate({}, value: any, callback: any) {
  if (value) {
    if (checkFormDate(callback)) {
      callback();
    }
  } else {
    callback(new Error("请选择时间"));
  }
}
// 校验 基本信息表单
const currentStepNext = () => {
  contestFormRef.value?.validate((valid: boolean) => {
    if (valid) {
      currentStep.value++;
    } else {
      ElMessage.error("请检查表单内容是否正确");
    }
  });
};
// #endregion
// #region 动态添加表单数据
const definedForm = ref<TemplateValue>({
  name: "",
  type: 0,
  required: true,
  value: "",
  is_delete: false,
  myId: 0,
});

// 自定义表单项弹窗
const addFormItemVisible = ref(false);

// 更具 参赛人数 固定初始表单
watch(
  () => currentStep.value,
  () => {
    if (currentStep.value === 1) {
      upContestForm.value.templateValueList = [
        {
          name: upContestForm.value.isTeam ? "姓名" : "队长姓名",
          required: true, // 是否必填
          type: 0, // 类型 el-input 0  反则 el-select 1
          value: "", // 值
          is_delete: true,
        },
      ];
      if (upContestForm.value.teamNum > 0 && upContestForm.value.isTeam === 0) {
        for (let i = 0; i < upContestForm.value.teamNum - 1; i++) {
          let newObj: TemplateValue = {
            name: `${i + 1}号队员姓名`,
            type: 0,
            required: true,
            value: "",
            is_delete: true,
          };
          upContestForm.value.templateValueList.push(newObj);
        }
      }
    }
  },
  { immediate: true }
);
// 删除
const handleTemplateFormItem = (item: TemplateValue) => {
  ElMessageBox.confirm("确定要删除该数据吗?")
    .then(() => {
      let index = upContestForm.value.templateValueList.indexOf(item);
      upContestForm.value.templateValueList.splice(index, 1);
      ElMessage({
        type: "success",
        message: "操作成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
};

// 显示添加下拉框
watch(
  () => definedForm.value.type,
  () => {
    if (definedForm.value.type === 1) {
      definedForm.value.value = udDynamicTags.value;
    }
  }
);
// 添加自定义表单下拉框选项
const udDynamicTags = ref([]);
// #endregion

// #region 活动相关的接口 数据
// 发布活动
const upContestInfo = async () => {
  if (upContestForm.value.password.length === 0) {
    ElMessage.error("密码不能为空");
    return;
  }
  ElLoading.service({
    lock: true,
    text: "正在发布活动...",
    background: "rgba(0, 0, 0, 0.1)",
  });
  upContestForm.value.teamNum = +upContestForm.value.teamNum;
  upContestForm.value.toll = +upContestForm.value.toll;
  upContestForm.value.categoryId =
    upContestForm.value.categoryId[upContestForm.value.categoryId.length - 1];
  upContestForm.value.templateValueList.forEach((item) => {
    if (item.type === 1 && Array.isArray(item.value)) {
      item.value = item.value.join();
    }
  });

  let res = await pushActivity(upContestForm.value);
  if (res.data.code != 200) {
    ElMessage.error(res.data.msg);
    ElLoading.service().close();
    return;
  }
  currentStep.value++;
  ElMessage.success(res.data.msg);
  ElLoading.service().close();
};
// 防抖
const useDebounce = debounce(upContestInfo, 1000);
// #endregion
const { categoryList, upHeaders, organizersData, optionProps } = usePublish();
</script>
<style lang="scss" scoped>
.content {
  margin: 0 auto;
  height: 100%;
  width: 800px;

  .steps {
    position: fixed;
    height: 350px;
    top: 120px;
    left: 10px;
  }

  .title {
    margin-top: 50px;
    text-align: center;
    height: 36px;

    h1 {
      margin: 0 auto;
      width: fit-content;
      font-size: 26px;
      color: #787575;
      position: relative;
      border-bottom: 1px solid #ebe7e7;

      &:before {
        content: "";
        display: inline-block;
        width: 80px;
        height: 2px;
        background-color: #9a9797;
        position: absolute;
        left: -90px;
        top: 50%;
        transform: translateY(-50%);
      }

      &:after {
        content: "";
        display: inline-block;
        width: 80px;
        height: 2px;
        background-color: #9a9797;
        position: absolute;
        right: -90px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }

  .form {
    margin-top: 20px;

    .template-form-item {
      width: 100%;

      .hove {
        position: relative;
        width: 100%;

        div {
          padding: 0 10px;
          margin-right: 10px;
          float: right;
          cursor: pointer;
          z-index: 100;
          border-radius: 10px;
        }

        div:nth-child(1) {
          position: absolute;
          top: -40px;
          right: -10px;
        }

        div:nth-child(2) {
          position: absolute;
          top: -40px;
          right: 40px;
        }
      }
    }
  }

  .release-success {
    margin-top: 50px;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .icon-success {
      display: flex;
      justify-content: center;
      align-items: center;

      span {
        font-size: 28px;
        font-weight: 900;
      }

      .text {
        margin-left: 20px;
      }
    }

    .btn {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }
  }
}

#cropper {
  max-width: calc(100% - 26px) !important;
  height: 80vh;
}

.el-message,
.el-message--error,
.is-center {
  z-index: 10000 !important;
}

:deep(.el-overlay) {
  z-index: 1000 !important;
}
</style>
